<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="webroot" value="${pageContext.request.contextPath}" />
<script type="text/javascript"
	src="${webroot}/static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
	src="${webroot}/static/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${webroot}/static/js/bootstrap-table.js"></script>
<script type="text/javascript"
	src="${webroot}/static/js/app-common-2.00.0.js"></script>
<script type="text/javascript" src="${webroot}/static/js/layer/layer.js"></script>
<script src="${webroot}/static/js/jquery.form.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/js/layer/skin/layer.css" />
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/css/bootstrap-table.min.css" />
<link rel="stylesheet" type="text/css" href="${webroot}/static/css/forms.css" />
<html lang="en">
<head>
<style type="text/css">
label {
    width: 80px;
}
</style>
</head>
<body>
	<div>
		<div id="main" style="width: 600px;height:400px;"></div>
	</div>
</body>
<script type="text/javascript" src="${webroot}/static/js/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
app.title = '坐标轴刻度与标签对齐';
option = {
	    legend: {},
	    tooltip: {},
	    dataset: {
	        dimensions: ['product', '0:00 - 6:00', '6:00 - 12:00', '12:00 - 18:00', '18:00 - 24:00'],
	        source: [
	            {product: '广州', '0:00 - 6:00': 43.3, '6:00 - 12:00': 85.8, '12:00 - 18:00': 93.7, '18:00 - 24:00': 95.2},
	            {product: '深圳', '0:00 - 6:00': 83.1, '6:00 - 12:00': 73.4, '12:00 - 18:00': 55.1, '18:00 - 24:00': 56.3},
	            {product: '上海', '0:00 - 6:00': 86.4, '6:00 - 12:00': 65.2, '12:00 - 18:00': 82.5, '18:00 - 24:00': 78.5},
	            {product: '湖南', '0:00 - 6:00': 72.4, '6:00 - 12:00': 53.9, '12:00 - 18:00': 39.1, '18:00 - 24:00': 88.9}
	        ]
	    },
	    xAxis: {type: 'category'},
	    yAxis: {},
	    series: [
	        {type: 'bar'},
	        {type: 'bar'},
	        {type: 'bar'},
	        {type: 'bar'}
	    ]
	};
myChart.setOption(option);
</script>
</html>